<!DOCTYPE html>
<html lang="en" th:fragment="comments" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:if="${article}!=null">
    <div class="comment-container" th:id="${article.id ?: 0}">
        <div class="clearfix" id="comments">
            <div th:if="${article.allowComment}">
                <span class="response">
                <th:block th:if="${session.login_user}">
                    Hi，<a data-no-instant="" th:href="${session.login_user.homeUrl}"
                          th:text="${session.login_user.username}"></a>
                    如果你想 <a data-no-instant="" href="/logout" title="注销">注销</a> ?
                </th:block>
            </span>
                <form class="comment-form" id="comment-form" method="post" onsubmit="return TaleComment.subComment();"
                      role="form">
                    <input id="id" name="id" type="hidden"/>
                    <input id="articleId" name="articleId" th:value="${article.id}" type="hidden"/>
                    <input name="csrfToken" th:value="${csrfToken}" type="hidden"/>
                    <input class="form-control input-control clearfix" id="author" maxlength="12" name="author"
                           placeholder="姓名 (*)"
                           type="text"
                    />
                    <input class="form-control input-control clearfix" id="mail" name="mail" placeholder="邮箱 (*)"
                           type="email"
                    />
                    <input class="form-control input-control clearfix" id="url" name="url" placeholder="网址 (http://)"
                           type="url"
                    />
                    <textarea class="form-control" id="textarea" maxlength="2000" minlength="5"
                              name="text" placeholder="以上信息可以为空,评论不能为空哦!"
                              required="required"></textarea>
                    <button class="submit" id="misubmit" type="submit">提交</button>
                </form>
            </div>
            <div th:unless="${article.allowComment}">
                <span class="response">评论已关闭.</span>
            </div>

            <div th:if="${comments}">
                <ol class="comment-list">
                    <th:block th:each="comment :${comments.records}">
                        <li class="comment-body comment-parent comment-odd" th:id="'li-comment-'+${comment.id}">
                            <div th:id="'comment-'+${comment.id}">
                                <div class="comment-view" onclick="">
                                    <div class="comment-header">
                                        <!--设置get请求的参数-->
                                        <img class="avatar"
                                             height="80"
                                             th:src="@{${commons.gravatar(comment.mail)}(s='80',r='G',d='')}"
                                             th:title="${comment.author}" width="80"/>
                                        <span class="comment-author">
                                <a href="##" rel="external nofollow"
                                   th:text="${comment.author}"></a>
                            </span>
                                    </div>
                                    <div class="comment-content">
                                        <span class="comment-author-at"></span>
                                        <p th:utext="${commons.article(comment.content)}"></p>
                                    </div>
                                    <div class="comment-meta">
                                        <time class="comment-time"
                                              th:text="${#dates.format(comment.createTime, 'yyyy-MM-dd HH:mm:ss')}"></time>
                                        <span class="comment-reply">
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </th:block>
                </ol>
                <div class="lists-navigator clearfix">
                    <ol class="page-navigator">
                        <th:block th:if="${comments.hasPrevious()}">
                            <li class="prev"><a th:href="'?cp='+${comments.getCurrent() - 1}+'#comments'">←</a></li>
                        </th:block>
                        <th:block th:each="navIndex : ${basePageUtils.getPageList(comments)}">
                            <li th:class="${comments.getCurrent()}==${navIndex}?'current':''"><a
                                    th:href="'?cp='+${navIndex}+'#comments'" th:text="${navIndex}"></a>
                            </li>
                        </th:block>
                        <th:block th:if="${comments.hasNext()}">
                            <li class="next"><a th:href="'?cp='+${comments.getCurrent() + 1}+'#comments'">→</a></li>
                        </th:block>
                    </ol>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
<div th:replace="comm/tale_comment::tale_comment"></div>
</html>